<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>vue</title>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
</head>

<body>
    <div id='app'>
        <div :name="hero | filter1 | filter2"> {{hero | filter1 | filter2}}</div>
    </div>
</body>
<script>
    Vue.filter("filter1", (str) => {
        console.log(str);
        return str + "--阿迪达斯";
    });
    Vue.filter("filter2", (str) => {
        console.log(str);
        return str + "--耐克";
    });
    let vm = new Vue({
        el: '#app',
        data: {
            hero: "剑圣"
        }
    });
    /*
        过滤器：
            语法：{{ data | filter1 | filter2 }}
            定义：
                Vue.filter("过滤器名字", 回调函数);
                
            1. 使用范围：v-bind 和 {{}}    
            2. 上一个表达式的值是下一个过滤器的参数
            3. 可以多个过滤器使用，管道符隔开
            4. vue3 废弃，有新的替换方案
    */
</script>

</html>